/**
 * Created by Administrator on 2016/8/1.
 */
$(function () {
    window.onload = function () {
        $('.top-container ul li').hover(function () {
            $(this).find('.topbar-leding').css("display", "block")
        });
        $('.top-container ul li').mouseleave(function () {
            $(this).find('.topbar-leding').css("display", "none")
        });
        $('#header-nav .nav-main li').mouseover(function () {
            $(this).css("border-bottom", "3px solid #15871B");
        });
        $('#header-nav .nav-main li').mouseout(function () {
            $(this).css("border-bottom", "none");
        });

        $('.btn-box-ios').mouseover(function () {
            $('.btn-box-ios i').addClass('ios-white');
        });
        $('.btn-box-ios').mouseout(function () {
            $('.btn-box-ios i').removeClass('ios-white');
        });
        $('.btn-box-ard').mouseover(function () {
            $('.btn-box-ard i').addClass('ard-white');
        });
        $('.btn-box-ard').mouseout(function () {
            $('.btn-box-ard i').removeClass('ard-white');
        });
        $('.super-navbar li').mouseover(function () {
            $(this).addClass('bt');
        });
        $('.super-navbar li').mouseout(function () {
            $(this).removeClass('bt');
        });
        $('.search').click(function () {
            $(this).css('display', 'none');
            $('.search-main').css('display', 'block');
        });
        $('.logo-s').mouseover(function () {
            $(this).find('span').css('display', 'block');
        });
        $('.logo-s').mouseout(function () {
            $(this).find('span').css('display', 'none');
        });
        var target1 = $('#a_click1');
        var target2 = $('#a_click2');
        $('.click').click(function () {
            if (target1.hasClass('a_click1') && target2.hasClass('a_click2')) {
                target1.removeClass('a_click1');
                target1.addClass('a_click2');
                target2.removeClass('a_click2');
                target2.addClass('a_click1');
                $('.click').css('background-color', '#f0f0f0');
                $('#nav_box').css('display', 'block')
            } else {
                target2.removeClass('a_click1');
                target2.addClass('a_click2');
                target1.removeClass('a_click2');
                target1.addClass('a_click1');
                $('.click').css('background-color', '#E8E8E8');
                $('#nav_box').css('display', 'none')
            }
        });
        $('.item-mod').mouseover(function () {
            $(this).addClass('item-mod-hover .link');
        });
        $('.item-mod').mouseout(function () {
            $(this).removeClass('item-mod-hover .link');
        });
        $('.sort-mod').mouseover(function () {
            $(this).addClass('sort-mod-hover');
        });
        $('.sort-mod').mouseout(function () {
            $(this).removeClass('sort-mod-hover');
        });
        $('.limit-tabs li').click(function () {
            $('.limit-tabs li').removeClass('current');
            $(this).addClass('current');
            var $i = $(this).index();
            $('.JS_tab_zc').css('display', 'none');
            $('.JS_tab_zc').eq($i).css('display', 'block');
        })
    };
    var w = 800;
    var l = 0;
    var timer = null;
    var len = $(".scroll ul li").length * 2; //复制了一份图片，长度变了。
    //复制一份图片，是为了解决第一张图片切换到最后一张或 最后一张切换到第一张时，图片区域会出现空白，用户体验不友好。
    // 页面一加载，就把ul定位到追加图片的第一张（本身图片在前，追加图片在后。）
    //当图片位置到第一份图片第二张时，马上把图片定位到第二份的第一张,图片位置到最后一张时（第二份最后一张）时，就把图片定位到第一份最后一张,
    //这样图片后面或前面还有一张图片，切换时不会留下空白。（关键之处）
    //加载后图片排列像这样：1  2  3  4  5  1  2  3  4  5
    $(".scroll ul").append($(".scroll ul").html()).css({'width': len * w, 'left': -len * w / 2});

    //自动每8秒切换一次
    timer = setInterval(init, 4000);
    function init() {
        $(".scroll .next").trigger('click'); //当页面一加载就触发next按钮的点击事件，用trigger的好处是减少重复代码,如果不用，就要把按钮click事件里代码全部复制过来，因为加载的代码和点击next按钮代码和效果相同，所以就用trigger触发执行click里面代码。
    }

    $(".scroll ul li").hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval(init, 4000);
    });

    $(".prev").click(function () {
        l = parseInt($(".scroll ul").css("left")) + w;  //这里要转成整数，因为后面带了px单位
        showCurrent(l);
    });
    $(".next").click(function () {
        l = parseInt($(".scroll ul").css("left")) - w;  //这里要转成整数，因为后面带了px单位
        showCurrent(l);
    });
    function showCurrent(l) {     //把图片的左右切换封装成一个函数
        if ($(".scroll ul").is(':animated')) { //当ul正在执行动画的过程中，阻止执行其它动作。关键之处，不然图片切换显示不完全，到最后图片空白不显示。
            return;
        }
        $(".scroll ul").animate({"left": l}, 500, function () {
            if (l == 0) {
                //当图片位置到第一份图片第二张时，马上把图片定位到第二份的第一张。注意这里的设置的css一定到写在animate动画完成时的执行  //函数里。否则图片只是一瞬间回到第一张，但是没有向右的动画效果。 我在做的时候，用的不是css,而是用animate()定位到第二个第一张，结果切换时，是反方向的运动，一直觉得无论怎样，图片方向都会发生变化 ，弄得花了一天时间才找到原因，所以一定 要用css。
                $(".scroll ul").css("left", -len * w / 2);

            } else if (l == (1 - len) * w) { //图片位置到最后一张时（第二份最后一张）时，就把图片定位到第一份最后一张。从而显示的是第一份最后一张。
                $(".scroll ul").css('left', (1 - len / 2) * w);
            }
        });
    }

    /*返回顶部*/
    $(window).scroll(function () {
        if ($(document).scrollTop() > 10) {
            $('.back-top').css('display', 'block');
        } else {
            $('.back-top').css('display', '');
        }
    });
    $('.back-top').click(function () {
        (window.scrollTo(0, 0))
    })
});


/*----倒计时----*/
$(function () {
    updateEndTime();
});
//倒计时函数
function updateEndTime() {
    var date = new Date();
    var time = date.getTime();

    $(".time_inner").each(function (i) {

        var endDate = this.getAttribute("endTime"); //结束时间字符串
        //转换为时间日期类型
        var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) {
                return parseInt(a, 10) - 1;
            }).match(/\d+/g) + ')');

        var endTime = endDate1.getTime(); //结束时间毫秒数

        var lag = (endTime - time) / 1000; //当前时间和结束时间之间的秒数
        if (lag > 0) {
            var second = Math.floor(lag % 60);
            var minite = Math.floor((lag / 60) % 60);
            var hour = Math.floor((lag / 3600) % 24);
            var day = Math.floor((lag / 3600) / 24);
            $(this).html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
        }
    });
    setTimeout("updateEndTime()", 1000);
}

$(function () {
    //ajax请求
    var num = 0;
    //添加到标签的内容
    var $list = $('.more-ax');

    //滚动条监听事件
    $(window).on('scroll', function () {

        //分页懒加载
        if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
            if (++num < 9) {
                loadData($list, num);
            } else {
                console.log('nodata');
            }
        }
    });
    loadData($list, num);
    function loadData($ele, num) {
        $.ajax({
            url: 'json_super_data/data-' + num + '.json',
            success: function (data) {
                var str = '';
                $.each(data, function (i, item) {
                    str += [
                        '<div class="sort-mod">',
                        '<div>',
                        '<a class="link" href="#">', '</a>',
                        '<i class="i-new">', '</i>',
                        '</div>',
                        '<img class="img" src="images/sort-5.jpg">',
                        '<div class="info">',
                        '<img class="logo" src="images/info-3.png">',
                        '<div class="about">',
                        '中国都市女鞋领导品牌',
                        '</div>',
                        '<div class="desc">',
                        '<strong>',
                        '<span class="arial">1.8',
                        '</span>折起',
                        '</strong>',
                        '<p class="J_start_tag" style="">08月01日~08月07日', '</p>',
                        '</div>',
                        '<div class="fl">',
                        '超级返：',
                        '<strong>23~53</strong>',
                        '%',
                        '</div>',
                        '</div>',
                        '</div>'
                    ].join("");
                });
                $ele.append(str);
            },
            error: function () {
                layer.msg('已经没有了');
            }
        })
    }

    //jquery点击元素后，滚动条滚动至该元素位置
    $('#xl').click(function () {
        $(window).scrollTop('658');
    });
    $('#pp').click(function () {
        $(window).scrollTop('6060');
    })
});

